<template>
  <div class="Page-singer">
    <E-singer-classify :classify="classify" @onClick="cutClassify" />
    <el-divider />
    <div class="wraper-bocy" v-infinite-scroll="loadMore">
      <el-row :gutter="20">
        <el-col :span="4" v-for="(item, index) in dataArr" :key="index">
          <E-singer-card :item="item" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  components: {
    'E-singer-classify': () => import('./module/E-singer-classify'),
    'E-singer-card': () => import('./module/E-singer-card')
  },
  mounted() {
    this.cutClassify();
  },
  data() {
    return {
      dataArr: [],
      offset: 0,
      classify: { area: -1, type: -1, initial: -1 },
      timer: null
    };
  },
  methods: {
    loadMore() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.offset += 18;
        this.getData(this.offset, 18, this.classify);
      }, 500);
    },
    cutClassify(classify = {}) {
      // eslint-disable-next-line no-restricted-syntax
      for (const key in classify) {
        // eslint-disable-next-line no-prototype-builtins
        if (classify.hasOwnProperty(key)) {
          this.classify[key] = classify[key];
          console.log(JSON.stringify(this.classify));
        }
      }
      this.offset = 0;
      this.dataArr = [];
      this.getData(this.offset, 18, this.classify);
    },
    getData(offset = 0, limit = 18, classify = { area: -1, type: -1, initial: -1 }) {
      this.$api.get('reco_artist', {
        offset, limit, ...classify
      }, true).then(({ artists }) => {
        this.dataArr = [...this.dataArr, ...artists];
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.Page-singer {
  padding: 20px;
  & > .el-divider {
    margin: 15px 0;
  }
}
</style>
